<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .alertBox{position: fixed;top:0;right:0;bottom:0;left:0;background: rgba(200,200,200,0.6);display: none;}
        .alert{background: white; width:400px;height:200px;position: absolute;left:0;top:0;right:0;bottom:0;margin:auto;display: flex;justify-content: space-between;flex-direction: column;align-items: center;box-shadow: 2px 2px 10px 10px #ccc;}
        .alert h2{margin:0;width:100%;}
        .alert .cont{width:100%;}
        .alert input{width:100px;}
    </style>
</head>
<body>
    这是网页正常内容
    <input type="button" class="open" value="点击打开弹出框">
    <div class="alertBox">
        <div class="alert">
            <h2>这是弹出框</h2>
            <div class="cont">
                这是弹出框内容
            </div>
            <input type="button" value="关闭" class="close">
        </div>
    </div>
</body>
<script>

    // 行为触发
    // var open = document.querySelector(".open");
    // open.onclick = function(){
    //     alert("hello world");
    // }

    // 自动触发
    alert("hello world");

    
    function alert(str){
        // 选择元素
        var alertBox = document.querySelector(".alertBox");
        var close = document.querySelector(".alertBox .close");
        var cont = document.querySelector(".alertBox .cont")
        // 显示
        alertBox.style.display = "block";
        // 根据参数设置内容
        cont.innerText = str;
        // 绑定关闭按钮的点击事件
        close.onclick = function(){
            alertBox.style.display = "none";
        }
    }


    
</script>
</html>